<template>
  <div class="home-box">
    <!-- 个人信息 -->
    <div class="card info-box">
      <van-row>
        <van-col span="8">
          <div class="u-flex-col u-col-center">
            <van-image round width="46px" height="46px" :src="userInfo.profile.avatarfull" />
            <span class="u-m-t-6 u-line-1 u-font-14">
              {{
                userInfo.profile.personaname
              }}
            </span>
          </div>
        </van-col>
        <van-col span="8">
          <div class="u-flex-col u-col-center" v-if="userInfo.profile.plus">
            <van-image
              width="38px"
              height="46px"
              src="https://www.opendota.com/assets/images/dota2/dota_plus_icon.png"
            />
            <span class="u-m-t-6 u-line-1 u-font-14">Dota Plus</span>
          </div>
        </van-col>
        <van-col span="8">
          <div class="u-flex-col u-col-center">
            <div class="u-relative" style="height:42px;">
              <van-image
                width="46px"
                height="46px"
                :src="
                  `https://www.opendota.com/assets/images/dota2/rank_icons/rank_icon_${userInfo.rank_tier.toString()[0]
                  }.png`
                "
              />
              <van-image
                v-if="userInfo.rank_tier.toString()[1] !== '0'"
                class="u-absolute u-top-0 u-left-0"
                width="46px"
                height="46px"
                :src="
                  `https://www.opendota.com/assets/images/dota2/rank_icons/rank_star_${userInfo.rank_tier.toString()[1]
                  }.png`
                "
              />
            </div>
            <span class="u-m-t-6 u-line-1 u-font-14">{{ rankLevel }}</span>
          </div>
        </van-col>
      </van-row>
    </div>

    <!-- 功能区域 -->
    <MainGrid :accountId="accountId"></MainGrid>

    <!-- 关注 -->
    <FollowerTable></FollowerTable>
    
    <!-- 最近20场 -->
    <RecentMathchesTable :accountId="accountId"></RecentMathchesTable>

    <!-- 数据总计 -->
    <TotalInfoTable :accountId="accountId"></TotalInfoTable>
  </div>
</template>
<script setup>
import FollowerTable from "./components/FollowerTable/index";
import MainGrid from "./components/MainGrid/index";
import RecentMathchesTable from './components/RecentMathchesTable/index'
import TotalInfoTable from './components/TotalInfoTable/index'
import { ref, computed } from "vue";
import { useStore } from "vuex";
import { formatRankTier } from "@/utils/dotaHelper.js";
const store = useStore();
const accountId = computed(() => store.getters.accountId);
const userInfo = ref(store.getters.userInfo);
const rankLevel = computed(() => {
  return formatRankTier(
    userInfo.value.rank_tier,
    userInfo.value.leaderboard_rank
  );
});
</script>
<style lang="scss" scoped>
.home-box {
  background: #f2f3f5;
  min-height: calc(100vh - 54px);
  .info-box {
    padding: 10px 6px;
  }
  .card {
    background: #ffffff;
    overflow: hidden;
    margin-bottom: 10px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .item {
    background: #efefef;
    padding: 6px 4px;
    border-radius: 8px;
    margin-bottom: 10px;
  }
  .bottom-box {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #ffffff;
    padding: 10px 0;
    font-size: 12px;
  }
}
</style>
